<template>
  <div>
    <div v-for="fld in getConfigFields()" :key="fld.name">
      <FieldInput
        v-if="checkHidden(fld)"
        v-model="value[fld.name]"
        :new-value="value"
        :old-value="data"
        :config="{ ...fld }"
        :options="options"
        @change="onChange"
      />
    </div>

    <van-collapse v-model="activeName" accordion>
      <div v-for="page in getPages()" :key="page.name">
        <div v-if="checkOne2many(page)">
          <van-collapse-item
            :title="page.label"
            :name="page.name"
            :value="data[`${page._one2many.name}__count`]"
          >
            <van-field :name="page._one2many.name">
              <template #input>
                <FormO2m
                  v-model="value[page._one2many.name]"
                  :data="o2mTodo[`${page._one2many.name}`]"
                  :config="{ ...page._one2many }"
                />
              </template>
            </van-field>
          </van-collapse-item>
        </div>
        <div v-else>
          <van-collapse-item :title="page.label" :name="page.name">
            <div v-for="fld2 in fieldsDictToList(page.fields)" :key="fld2.name">
              <FieldInput
                v-if="checkHidden(fld2)"
                v-model="value[fld2.name]"
                :new-value="value"
                :old-value="data"
                :config="fld2"
                :options="options"
                @change="onChange"
              />
            </div>
          </van-collapse-item>
        </div>
      </div>
    </van-collapse>

    <van-button round block type="info" @click="onSubmit">
      {{ config.submitBtn ? config.submitBtn.text : '提交' }}
    </van-button>

    <van-button v-if="value.id" type="danger" @click="onDelete">
      删除
    </van-button>
  </div>
</template>

<script>
import FieldInput from './FieldInput'
import FormO2m from './FormO2m'

// import ListCell from '@/components/ListPage/ListCell'
import ViewMixin from '@/components/ViewPage/ViewMixin'

import { Dialog } from 'vant'

export default {
  name: 'FormPage',
  components: {
    FieldInput,
    FormO2m
    // ListCell
  },
  mixins: [ViewMixin],

  props: {
    options: {
      type: Object,
      default: () => {
        return {}
      }
    },

    o2mTodo: {
      type: Object,
      default: () => {
        return {}
      }
    },

    value: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  data() {
    return {}
  },
  computed: {
    //
  },

  async created() {},

  methods: {
    onChange(val, config) {
      console.log('form page , onChange ,', val, config)
      // 触发  Model. onchange 事件
    },

    checkHidden(fld) {
      // O2M popup 也有这个函数 ，如果修改 请同步
      // console.log('checkHidden,', fld)
      if (fld.hidden) {
        return false
      }

      if (fld.related) {
        return false
      }

      if (fld.compute) {
        return false
      }

      return true
    },
    // onClickO2m(o2m, config) {
    //   //
    //   console.log('onClickO2m,', this.model, o2m, config)
    // },

    async onSubmit(values) {
      console.log('FormPage submit', values, this.value, this.config)

      // const vals = Object.keys(this.value).reduce((acc, cur) => {
      //   const confs = this.config.fieldsForForm.filter(
      //     item => item.name === cur
      //   )
      //   const conf = confs.length ? confs[0] : {}
      //   if (conf.type === 'many2many' && conf.selected) {
      //     acc[cur] = [[6, 0, this.value[cur]]]
      //   } else {
      //     acc[cur] = this.value[cur]
      //   }
      //   return acc
      // }, {})

      // console.log('submit 2', vals)

      await this.$parent.onSubmit(this.value)
    },

    onDelete() {
      //

      // eslint-disable-next-line space-before-function-paren
      const beforeClose = async (action, done) => {
        if (action === 'confirm') {
          console.log('onDelete', this.value)
          await this.$parent.onDelete(this.value, () => {
            done()
          })
          // setTimeout(done, 1000)
        } else {
          done()
        }
      }

      Dialog.confirm({
        title: '删除?',
        message: '删除?',
        beforeClose
      })
    }
  }
}
</script>

<style type="text/css"></style>
